<template>
  <div
    class="my-select"
    @click="toggleDropdown"
    ref="selectRef"
    :style="{ width: props.width }"
  >
    <div class="my-select__selected" :class="{ placeholder: isPlaceholder }">
      {{ selectedLabel || props.placeholder }}
      <span class="my-select__right">
        <span
          v-if="props.showClear && !isPlaceholder"
          class="my-select__clear"
          @click.stop="clearSelection"
        >
          <van-icon name="cross" size="13" color="#cccccc" />
        </span>
        <span
          class="my-select__arrow"
          :class="{ open: dropdownVisible }"
          v-if="isPlaceholder || !props.showClear"
        >
          <van-icon name="arrow-down" size="16" color="#cccccc" />
        </span>
      </span>
    </div>
    <div v-if="dropdownVisible" class="my-select__dropdown">
      <div
        v-for="option in options"
        :key="option[props.valueKey]"
        class="my-select__option"
        :class="{ selected: option[props.valueKey] === modelValue }"
        @click.stop="selectOption(option)"
      >
        {{ option[props.labelKey] }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({
  options: {
    type: Array,
    required: true,
    default: () => [],
  },
  modelValue: {
    type: [String, Number, null],
    default: null,
  },
  labelKey: {
    type: String,
    default: 'label',
  },
  valueKey: {
    type: String,
    default: 'value',
  },
  width: {
    type: String,
    default: 'auto',
  },
  placeholder: {
    type: String,
    default: '请选择',
  },
  showClear: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['update:modelValue']);

const dropdownVisible = ref(false);
const selectRef = ref(null);

const selectedLabel = computed(() => {
  const selected = props.options.find(
    (opt) => opt[props.valueKey] === props.modelValue
  );
  return selected ? selected[props.labelKey] : '请选择';
});

const isPlaceholder = computed(() => selectedLabel.value === '请选择');

function clearSelection() {
  emit('update:modelValue', null);
  dropdownVisible.value = false;
}

function toggleDropdown() {
  dropdownVisible.value = !dropdownVisible.value;
}

function selectOption(option) {
  emit('update:modelValue', option[props.valueKey]);
  dropdownVisible.value = false;
}

function handleClickOutside(event) {
  if (selectRef.value && !selectRef.value.contains(event.target)) {
    dropdownVisible.value = false;
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped lang="scss">
.my-select {
  position: relative;
  cursor: pointer;
  user-select: none;
  font-size: 22px;
  .my-select__selected {
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    &.placeholder {
      color: #bfbfbf; // 你可以根据需要调整为更淡的颜色
    }
    .my-select__right {
      display: flex;
      align-items: center;
      margin-left: 8px;
    }
    .my-select__clear {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #f5f7fa;
      color: #c0c4cc;
      cursor: pointer;
      transition: color 0.2s;
      &:hover {
        color: #909399;
      }
    }
  }
  .my-select__arrow {
    margin-left: 8px;
    transition: transform 0.2s;
    &.open {
      transform: rotate(180deg);
    }
  }
  .my-select__dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
  }
  .my-select__option {
    color: #555;
    padding: 8px 12px;
    cursor: pointer;
    &:hover {
      background: #f5f7fa;
    }
    &.selected {
      background: var(--van-primary-color);
      color: #fff;
    }
  }
}
</style>
